<#--
    门店系统第三个页面，哎！累了！！！休息一下。
    页面介绍：各店任务进度表
    时间：2018-5-11
    创建人：Lt
-->
<#assign ctxPath=request.contextPath />
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>各店任务进度表</title>
    <script src="${ctxPath}/static/jquery-2.1.4.js"></script>
    <link rel="stylesheet" href="${ctxPath}/static/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="${ctxPath}/static/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="${ctxPath}/static/bootstrap/css/bootstrap.min.css">
    <script src="${ctxPath}/static/bootstrap/js/bootstrap.js" ></script>
    <script src="${ctxPath}/static/bootstrap/js/bootstrap.min.js" ></script>
</head>
<body>
<div class="container-fluid" id="app">
    <form class="form-inline" style="margin-top: 50px; margin-bottom: 5px;">
        <div class="form-group" style="width: 100%; margin-bottom: 5px;">
            <label for="exampleInputName2">门店：</label>
            <select class="form-control" style="width: 120px; margin-left: 32px;">
                <option selected>请选择</option>
                <option v-for="(obj, index) in areaObjects">{{ obj.areaName }}</option>
            </select>
            <label for="exampleInputName2" style="margin-left: 33px;">选择时间：</label>
            <input type="text" class="form-control" id="beginTime" placeholder="选择时间" style="width: 120px;"/>

            <button type="button" class="btn btn-success" v-on:click="queryUserInfo" style="margin-left: 10px;">查询</button>
        </div>
    </form>
    <div class="row" style="background-color: rgb(53, 147, 202); margin-right: 0px; margin-left: 0px; height: 37px;">
        <div class="col-sm-10" style="margin-top: 6px;">
            <strong style="font-size: 18px; color: #f9f9f9;">任务计划完成情况汇总表</strong>
        </div>
        <div class="col-sm-2" style="text-align: right;"></div>
    </div>
    <div class="table-responsive" id="tableContainer" style="height: 410px;">
        <table class="table table-striped table-condensed table-bordered">
            <thead style="background-color: #eee;">
                <tr>
                    <th>序号</th>
                    <td>店面名称</td>
                    <td>实际销售额</td>
                    <td>任务计划金额</td>
                    <td>完成率</td>
                    <td>任务完成进度</td>
                    <td>累计销售额</td>
                    <td>全年计划金额</td>
                    <td>全年任务完成率</td>
                </tr>
            </thead>
            <tbody>
            <tr v-for="(obj, index) in objects">
                <th>{{ index + 1 }}</th>
                <td>{{ obj.userName }}</td>
                <th>{{ index + 1 }}</th>
                <th>{{ index + 1 }}</th>
                <th>{{ index + 1 }}</th>
                <th>{{ index + 1 }}</th>
                <th>{{ index + 1 }}</th>
                <th>{{ index + 1 }}</th>
                <th>{{ index + 1 }}</th>
            </tr>
            </tbody>
        </table>
    </div>
    <div style="text-align: right; margin-top: 10px;" id="pageDiv"></div>
</div>
<script src="${ctxPath}/static/layui/layui.js"></script>
<script src="${ctxPath}/static/layui/layui.all.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var laypage = layui.laypage,
            layer = layui.layer
            laydate = layui.laydate;

    var queryModel = {
        userId: '879'
    }

    var app = new Vue({
        el: '#app',
        data: {
            objects: [],
            areaObjects: []
        },
        methods: {
            queryUserInfo: function () {
                queryObjects()
            }
        }
    })

    var getObjects = function (queryModel) {
        // console.log(queryModel)
        layer.load(1)
        $.ajax({
            url: '${ctxPath}/user/getUserInfo',
            type: 'post',
            data: queryModel,
            success: function (data) {
                layer.closeAll('loading');
                if (data.success == false){
                    layer.msg("获取出错："+data.message)
                    return
                }
                var dataArray = data.data;
                if (dataArray.length == 0){
                    layer.msg("查询没有数据")
                    return
                }
                // console.log(dataArray)
                app.objects = dataArray;

            },
            error: function (error) {
                layer.closeAll('loading')
            }
        })
    }

    getObjects(queryModel);

    var queryObjects = function () {
        queryModel.userId = $("#userId").val()
        getObjects(queryModel)
    }


    app.areaObjects = [
        {areaName: '区域1'},
        {areaName: '区域2'},
        {areaName: '区域3'},
        {areaName: '区域4'},
        {areaName: '区域5'}
    ]


    //执行一个laydate实例
    laydate.render({
        elem: '#beginTime' //指定元素
        ,format: 'yyyy-MM-dd' //可任意组合
    });

    //执行一个laydate实例
    laydate.render({
        elem: '#endTime' //指定元素
        ,format: 'yyyy-MM-dd' //可任意组合
    });

</script>
</body>
</html>